import Vue from 'vue'
import Vuex from 'vuex'
import http from '../util/http'


/* 
            笔记整理
    步骤:
        1、使用仓库里的值
            this.$store.state.count(主仓库)
            this.$store.state.func.list(子仓库)
        2、更改仓库里的状态值 
            两种方法都可以，第一种 使用Mutation直接修改state的值
            第二种 使用actions间接调用 使用Mutation修改state的值
            但更改 Vuex 的 store 中的状态的唯一方法是提交 mutation 就是说只有在mutation里
            才能修改状态值
            ①使用Mutation

            this.$store.commit('increment', 10)

            increment (state, n) {
                state.count += n
            }

            直接使用this.$store.commit("increment",{
                count : 4 
            })
            
             increment (state, n) {
                state.count += n.n
            }

            缺点： mutation 必须是同步函数 里面不能发起异步请求 

            ②使用Mutation

            Action 类似于 mutation，不同在于：

            Action 提交的是 mutation，而不是直接变更状态。
            Action 可以包含任意异步操作。

            actions: {
            increment ({ commit }) {
                commit('increment')
                }
            }

            this.$store.dispatch('increment') (主仓库)

            触发子仓库func的 init increment
            this.$store.dispatch("func/increment")  (子仓库)

            乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？
            实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 
            就不受约束！我们可以在 action 内部执行异步操作：

            actions: {
            incrementAsync ({ commit }) {
                setTimeout(() => {
                    //在actions里操作mutation来间接修改状态值
                commit('increment')
                }, 1000)
            }
            }
  */

// 导入所有子仓库
import role from './role';
import func from './func';

/* 让所有组件无条件使用$store来访问仓库对象 */
Vue.use(Vuex);

/* 
        关于store，需要先记住两点：
            store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；
            不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化
*/

const store = new Vuex.Store({
    modules: {
        //将store模块化
        // 如果将store分成一个个的模块的话，则需要用到modules。
        //然后在每一个module中写state, getters, mutations, actions等。
        role,
        func
    },
    state: { //存放状态
        http
    },
    getters: { //state的计算属性

    },
    mutations: { //更改状态的逻辑，同步操作

        /* 只有mutation节点中的方法才可以修改state中的数据 
        mutations中的方法不能包含异步耗时的代码，只能包含同步代码
        mutationa中的方法调用时的第一个参数总是state节点本身
        第二个参数才是调用时实际传递的参数
        第一个参数state总是指向自身层级的state
    */
    },
    actions: {
        /* 
        异步变更数据，必须通过action，但是还是得通过
        mutation间接变更数据。
        */
    }
});



export default store;